<template>
  <!-- 提现页面 -->
  <header class="Headerclass20">
    <img
      src="../../../../images//fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
      alt=""
      @click="goBack"
    />
    <h5>H币提现</h5>
    <b style="font-size: 12px" @click="goRecord">提现记录</b>
  </header>
  <main>
    <div class="headerl">
      <h4>到账银行卡</h4>
      <div>
        <h4>中国建设银行</h4>
        <h5 style="color: aqua">当天24点前到账</h5>
      </div>
      <div>
        <i class="iconfont icon-right-1-copy"></i>
      </div>
    </div>
    <div class="mainl">
      <h3>提现金额</h3>
      <span style="font-size: 40px"
        >￥ <b style="color: aqua">{{ price }}</b></span
      >
    </div>
    <div class="footerl">
      <div class="Check">
        <el-checkbox @change="Allprice" />
        <span style="margin-left: 10px">全部提现。3050H币,可提现30元</span>
      </div>

      <el-button type="primary" class="cashing " @click="goBackCashing ">提现</el-button>
    </div>
  </main>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const price = ref("20");
const goBack  = () => {
  router.go(-1);
};
const goBackCashing = () => {
  router.go(-1);
};
const goRecord = () => {
  router.push("/Recordpayouts");
};
const Allprice = (e) => {
  console.log(e);
  if (e) {
    price.value = 30;
  } else {
    price.value = 0;
  }
};
</script>

<style lang="scss" scoped>
.Headerclass20 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main {
  width: 100%;
  background: #f2f2f2;
  border-radius: 10%;
  .headerl {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2px solid #fff;
  }
  .mainl {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin-left: 30px;
    border-bottom: 2px solid #fff;
  }
  .footerl {
    display: flex;
    flex-direction: column;
    .Check {
      display: flex;
      align-items: center;
      margin-left: 30px;
    }
    .Bto {
      margin-left: 50%;
      transform: translateX(-50%);
      width: 80%;
      border-radius: 10px;
      font-size: 18px;
      color: #fff;
      border: none;
      cursor: pointer;
      margin-top: 20px;
    }
  }
}
</style>
